import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { regAPI } from '../../api'
import { Form, Input, Button, Toast } from 'antd-mobile'
import './index.scss'

function Reg() {
  const navigate = useNavigate()
  // 用户数据
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const userName = (val) => {
    setUsername(val)
  }

  const passWord = (val) => {
    setPassword(val)
  }
  const regHandler = async () => {
    const { data: res } = await regAPI({
      username: username,
      password: password,
    })
    if (res.status !== 200) return false
    console.log(res)
    Toast.show({
      content: res.description,
    })
    navigate('/login')
  }
  return (
    <div>
      <Form
        layout="horizontal"
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            onClick={regHandler}
          >
            注册
          </Button>
        }
      >
        <Form.Item
          name="姓名"
          label="用户名"
          rules={[{ required: true, message: '用户名不能为空！' }]}
        >
          <Input onChange={userName} placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="密码"
          label="密码"
          rules={[{ required: true, message: '密码不能为空！' }]}
        >
          <Input onChange={passWord} placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <Link to="/login">已有账号，去登录</Link>
    </div>
  )
}

export default Reg
